<template>
  <van-nav-bar title="详情" fixed />
  <div style="margin-top: 45px"></div>
  <!-- 轮播 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
  <!-- 富文本 -->
  <div v-html="detailData.goods_introduce"></div>
  <!-- 动作栏 -->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
    <van-action-bar-button type="warning" text="加入购物车" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>

<script setup>
import { ref } from "vue";
import { detailApi } from "@/api/api";
import { useRoute } from "vue-router";
let route = new useRoute();
console.log(route.params.goods_id);

let detailData = ref([]);
let images = ref([]);
detailApi(route.params.goods_id).then((res) => {
  console.log("详情数据", res);
  detailData.value = res.data.message;
  for (let i = 0; i < res.data.message.pics.length; i++) {
    images.value.push(res.data.message.pics[i].pics_mid);
  }
});
</script>

<style lang="scss" scoped></style>
